<template>
  <div class="home">
    <el-header class="header">
      <AppHeader @changeCollapse="changeCollapse" :isCollapse="isCollapse" />
    </el-header>
    <div class="content">
      <Menu style="margin-top: 10px" :isCollapse="isCollapse" />
      <div class="main-content">
        <el-main class="main">
          <router-view class="main-content"></router-view>
        </el-main>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, onMounted, toRefs } from "vue";
import AppHeader from "@/components/AppHeader.vue";
import Menu from "@/components/Menu.vue";
// import { useStore } from 'vuex'

export default {
  name: "Home",
  components: {
    AppHeader,
    Menu,
  },
  setup() {
    // const store = useStore();
    // const count = computed(() => store.state.count*2);
    let state = reactive({
      isCollapse: false,
    });
    onMounted(() => {});
    const changeCollapse = (e: any) => {
      state.isCollapse = e;
    };
    return {
      ...toRefs(state),
      changeCollapse,
      // count,
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  background-color: #f0f2f5;
  overflow: hidden;
  // height: 100vh;
  .content {
    height: calc(100% - 55px);
    width: 100vw;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    .main-content {
      width: 100%;
      overflow: hidden;
    }
  }
}
.header {
  background-color: #fff;
}
.main {
  margin: 10px 10px 5px 10px;
  background-color: #fff;
  height: 100%;
}
.version-box {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 12px;
  padding: 0px 20px 5px 20px;
}
</style>
